<template>
	<view class="goods-container" v-if="goodsDetail">
		<!-- 轮播图 -->
		<swiper class="swiper-container" v-if="bannerList" :indicator-dots="true" circular="true" :autoplay="true"
			:interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in bannerList" :key="item">
				<image :src="item" mode="" @click="previewImage(index)" />
			</swiper-item>
		</swiper>
		<!-- 内容 -->
		<view class="content">
			<van-tag class="van-tag" size="large" type="danger">自营</van-tag>
			<text>{{goodsDetail.proname}}</text>
			<view class="price">￥{{format(goodsDetail.originprice || 0)}}</view>
		</view>

		<!-- 商品导航 -->
		<van-goods-action>
			<van-goods-action-icon icon="chat-o" text="客服" dot />
			<van-goods-action-icon icon="cart-o" text="购物车" @click="goToCart" :info="sum" />
			<!-- <van-goods-action-icon icon="cart-o" text="购物车" v-else @click="goToCart" /> -->
			<van-goods-action-icon icon="shop-o" text="店铺" />
			<van-goods-action-button text="加入购物车" type="warning" @click="addToCart" />
			<van-goods-action-button text="立即购买" />
		</van-goods-action>
	</view>
</template>

<script>
	import {
		getGoodsDetail
	} from '../../api/goodsDetail';
	import store from '../../store/index'
	import formatPrice from '../../utils/format.js'

	export default {
		onLoad(options) {
			this.getGoodsDetailData(options.proid)
		},
		data() {
			return {
				goodsDetail: {},
				bannerList: []
			}
		},
		computed: {
			sum() {
				return this.$store.getters['cart/allNum']
			}
		},

		methods: {

			async getGoodsDetailData(proid) {
				const res = await getGoodsDetail(proid)
				this.goodsDetail = res.data
				this.bannerList = res.data.banners[0].split(',')
				uni.setNavigationBarTitle({
					title: res.data.proname
				})
			},
			previewImage(index) {
				uni.previewImage({
					urls: this.bannerList,
					current: index
				})
			},
			// 跳转到购物车
			goToCart() {
				uni.switchTab({
					url: '/pages/cart/cart'
				})
			},
			// 添加购物车
			addToCart() {
				const {
					proname,
					proid,
					originprice,
					img2
				} = this.goodsDetail
				const goods = {
					proname,
					proid,
					price: originprice,
					img: img2,
					num: 1,
					checked: true
				}
				this.$store.commit('cart/addGoods', goods)
			},
			format(val) {
				return formatPrice(val)
			}
		}
	}
</script>

<style scoped lang="scss">
	/* subPage/gooodsDetail/goodsDetail.wxss */
	.swiper-container {
		width: 750rpx;
		height: 600rpx;
	}

	.swiper-container swiper-item {
		width: 750rpx;
		height: 600rpx;
	}

	.swiper-container swiper-item image {
		width: 100%;
		height: 100%;
	}

	.content {
		margin-top: 20rpx
	}

	.content .van-tag {
		margin: 0 20rpx;
	}

	.content .price {
		font-size: 20px;
		font-weight: 888;
		color: red;
		margin-top: 40rpx
	}
</style>